<template>
    <div class="header justify-content-between">
        <div class="align-item-center">
            <div class="fs32 colorFFF">"精卫"指挥信息系统信息管理平台(单机版)</div>
            <!-- <div class="version fs20 colorFFF">V1.0.0</div> -->
        </div>
        <div class="align-item-center">
            <input class="search-input fs20" type="text" placeholder="请输入任务名称/设备名称" v-model="keyWords" />
            <div class="search-btn fs20 colorFFF" @click="search">搜索</div>
        </div>
        <div class="align-item-center">
            <div class="align-item-center cursor-pointer">
                <img class="head" src="../assets/images/icon-head-dft.png">
                <span class="fs24 colorFFF">{{username}}</span>
                <div class="triangle"></div>
            </div>
            <div class="align-item-center ml47 cursor-pointer" @click="exitLogin">
                <img class="exit" src="../assets/images/icon-exit.png">
                <span class="fs24 colorFFF">退出</span>
            </div>
        </div>
    </div>
</template>

<script>
import Bus from '@/assets/js/bus.js'
export default {
    name: 'Header',
    data () {
        return {
            username: '', //用户名
            keyWords: '' //搜索关键词
        }
    },
    created() {
        this.username = sessionStorage.getItem('username');
    },
    methods: {
        // 搜索
        search() {
            Bus.$emit('search', this.keyWords);
        },
        // 退出登录
        exitLogin() {
            this.$router.push('/'); 
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .header {width: 100%;height: 72rem;background-color: #285FE3;background-image: url(../assets/images/header-bg.png);background-size: 100% 100%;padding: 0 50rem;
        .version {width: 86rem;height: 32rem;line-height: 30rem;text-align: center;background-image: url(../assets/images/version-bg.png);background-size: 100% 100%;margin-left: 17rem;position: relative;top: 2rem;}
        .search-input {width: 340rem;height: 38rem;background: #1E55C6;border: 1px solid #6192F7;border-radius: 19rem;padding-left: 20rem;color: #6192F7;}
        .search-input::placeholder {color: #6192F7;}
        .search-btn {width: 106rem;height: 38rem;background-color: #285FE3;border-radius: 19rem;margin-left: 9rem;line-height: 38rem;text-align: center;cursor: pointer;}
        .head {width: 24rem;height: 30rem;margin-right: 15rem;}
        .triangle {width: 0;height: 0;border-top: 8rem solid #FFF;border-right: 8rem solid transparent;border-left: 8rem solid transparent;margin-left: 13rem;}
        .exit {width: 28rem;height: 30rem;margin-right: 15rem;}
    }
</style>
